<template>
  <el-dialog
    v-model="state.dialogVisible"
    :title="state.dialogTitle"
    width="800px"
    @close="closeDialog"
  >
    <el-tabs>
      <el-tab-pane cname="PC" label="PC端">
        <el-tree
          ref="pcPermTreeRef"
          :data="state.pcPermList"
          node-key="pkPerm"
          :props="{
            children: 'downs',
          }"
          show-checkbox
        >
          <template #default="{ data }">
            <div style="display: flex">
              <div style="width: 380px; font-size: 18px; font-weight: 400">
                {{ `${data.permName}` }}
              </div>
              <label>{{ `${data.roleMemo}` }}</label>
            </div>
          </template>
        </el-tree>
      </el-tab-pane>
      <el-tab-pane cname="mobile" label="移动端">
        <el-tree
          ref="mobilePermTreeRef"
          :data="state.mobilePermList"
          node-key="pkPerm"
          show-checkbox
        >
          <template #default="{ data }">
            <span>
              <span>
                {{ `${data.permName}:${data.roleMemo}` }}
              </span>
            </span>
          </template>
        </el-tree>
      </el-tab-pane>
    </el-tabs>
    <template #footer>
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
  import { findPermByRoleApi, getPermissionApi } from '@/api/comdesk/perm'
  import { changeRolePermApi } from '@/api/comdesk/role'
  const $baseMessage = inject('$baseMessage')
  const pcPermTreeRef = ref()
  const mobilePermTreeRef = ref()
  const state = reactive({
    roleRecord: null,
    dialogVisible: false,
    dialogTitle: '修改权限',
    pcPermList: [],
    mobilePermList: [],
  })
  const save = async () => {
    const pcPerms = [
      ...(pcPermTreeRef.value.getCheckedKeys() || []),
      ...(pcPermTreeRef.value.getHalfCheckedKeys() || []),
      ...(mobilePermTreeRef.value.getCheckedKeys() || []),
      ...(mobilePermTreeRef.value.getHalfCheckedKeys() || []),
    ]
    await changeRolePermApi({
      pkRole: state.roleRecord.pkRole,
      perms: pcPerms,
    })
    $baseMessage('修改成功', 'success')
    closeDialog()
  }
  const closeDialog = () => {
    state.dialogVisible = false
  }
  const initData = async () => {
    const { data } = await getPermissionApi({})
    if (data && data.length > 0) {
      data.forEach((item) => {
        if (item.applyTo === 'web') {
          state.pcPermList.push(item)
        } else {
          state.mobilePermList.push(item)
        }
      })
    }
  }
  const initRoleRoute = async () => {
    const { data } = await findPermByRoleApi({
      pkRole: state.roleRecord.pkRole,
    })
    if (data && data.length > 0) {
      // pcPermTreeRef.value.setCheckedKeys(data)
      // mobilePermTreeRef.value.setCheckedKeys(data)
      let keys = []
      data.forEach((key) => {
        const node =
          pcPermTreeRef.value.getNode(key) ||
          mobilePermTreeRef.value.getNode(key)
        node && node.isLeaf && keys.push(key)
      })
      pcPermTreeRef.value.setCheckedKeys(keys)
      mobilePermTreeRef.value.setCheckedKeys(keys)
    } else {
      pcPermTreeRef.value.setCheckedKeys([])
    }
  }

  onMounted(() => {
    initData()
  })
  defineExpose({
    handleOpen: (row) => {
      if (!row) return
      state.roleRecord = row
      state.dialogVisible = true
      initRoleRoute()
    },
  })
</script>
